<template>
  <div class="flex-layout" v-show="isShow">
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { listProductApi } from "@s/api";
export default {
  name: "echartCom",
  data() {
    return {
      isShow: false,
      salesAmountList: [],
      salesMoneyAmountList: []
    };
  },
  props: ["echartFrom"],
  mounted() {},
  methods: {
    getList() {
      let json = JSON.parse(this.echartFrom);
      delete json.i;
      listProductApi(json).then(res => {
        this.salesAmountList = res.salesAmountList;
        this.salesMoneyAmountList = res.salesMoneyAmountList;

        if (this.salesAmountList.length > 0) {
          this.isShow = true;
          this.getData();
          this.getData2();
        } else {
          this.isShow = false;
        }
      });
    },
    getData2() {
      // 数据显示
      let productData = [];
      let moneyData = [];
      this.salesMoneyAmountList.forEach(item => {
        productData.push(item.productName);
        moneyData.push(item.salesMoneyAmount);
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main2"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          x: "center",
          text: "单品销售金额统计",
          subtext: "单位：元",
          textStyle: {
            fontSize: 14
          },
          subtextStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          // trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          left: "left",
          // data: ["2011年", "2012年"]
          data: []
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          name: "金额",
          boundaryGap: [0, 0.01],
          minInterval: 1,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: productData,
          name: "商品名称",
          axisTick: {
            show: false
          }
        },
        series: [
          {
            color: ["#60C1EF"],
            barWidth: 20,
            // name: "2011年",
            type: "bar",
            data: moneyData,
            label: {
              normal: {
                position: "right",
                show: true
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getData() {
      // 数据显示
      let productData = [];
      let numberData = [];
      this.salesAmountList.forEach(item => {
        productData.push(item.productName);
        numberData.push(item.salesAmount);
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          x: "center",
          text: "单品销售量统计",
          subtext: "单位：件",
          textStyle: {
            fontSize: 14
          },
          subtextStyle: {
            fontSize: 12
          }
        },
        tooltip: {
          // trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          left: "left",
          // data: ["2011年", "2012年"]
          data: []
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          name: "销量",
          boundaryGap: [0, 0.01],
          minInterval: 1,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          name: "商品名称",
          data: productData,
          axisTick: {
            show: false
          }
        },
        series: [
          {
            color: ["#60C1EF"],
            barWidth: 20,
            // name: "2011年",
            type: "bar",
            data: numberData,
            label: {
              normal: {
                position: "right",
                show: true
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  watch: {
    echartFrom(val) {
      if (val) {
        this.getList();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.flex-layout {
  // margin-left: 30px;
  // margin-top: 30px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  clear: both;
  div {
    float: left;
  }
}
</style>
